<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端开发基础 - HTML入门指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .section-title {
            position: relative;
            padding-left: 20px;
        }
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 20px;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        .tag-badge {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            display: inline-block;
            margin: 4px;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 30px 0;
        }
        .drop-cap {
            float: left;
            font-size: 4em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0.2em 0;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="text-5xl font-bold mb-4">前端开发基础</h1>
            <p class="text-2xl mb-8 opacity-90">HTML入门完全指南</p>
            <div class="flex justify-center space-x-4">
                <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full"><i class="fas fa-code mr-2"></i>HTML</span>
                <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full"><i class="fas fa-paint-brush mr-2"></i>CSS</span>
                <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full"><i class="fas fa-cogs mr-2"></i>JavaScript</span>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container mx-auto px-6 py-12">
        
        <!-- 工作模式 -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <h2 class="text-3xl font-bold mb-6 section-title">前端开发的工作模式</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 text-purple-800"><i class="fas fa-palette mr-2"></i>设计阶段</h3>
                    <p class="text-gray-700">设计师输出PSD文件和标注文档，为开发提供视觉规范和交互细节。</p>
                </div>
                <div class="bg-gradient-to-br from-blue-50 to-cyan-50 p-6 rounded-xl">
                    <h3 class="text-xl font-semibold mb-4 text-blue-800"><i class="fas fa-code mr-2"></i>开发阶段</h3>
                    <p class="text-gray-700">前端工程师将设计稿转化为HTML、CSS和JavaScript代码，实现页面功能。</p>
                </div>
            </div>
        </section>

        <!-- 运行环境 -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <h2 class="text-3xl font-bold mb-6 section-title">运行环境 - 浏览器</h2>
            <div class="prose max-w-none">
                <p class="text-lg text-gray-700 mb-4"><span class="drop-cap">浏</span>览器是前端代码的运行环境，它负责解析HTML、CSS和JavaScript，将代码转化为用户可见的网页。现阶段学习时，我们主要通过本地浏览器直接打开HTML文件进行测试。后期会将网页部署到服务器上，通过HTTP协议访问。</p>
                <div class="bg-gray-50 p-6 rounded-xl mt-6">
                    <h4 class="font-semibold mb-3"><i class="fas fa-globe mr-2 text-blue-600"></i>主流浏览器</h4>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="text-center">
                            <i class="fab fa-chrome text-4xl text-green-600 mb-2"></i>
                            <p class="text-sm">Chrome</p>
                        </div>
                        <div class="text-center">
                            <i class="fab fa-firefox-browser text-4xl text-orange-600 mb-2"></i>
                            <p class="text-sm">Firefox</p>
                        </div>
                        <div class="text-center">
                            <i class="fab fa-safari text-4xl text-blue-600 mb-2"></i>
                            <p class="text-sm">Safari</p>
                        </div>
                        <div class="text-center">
                            <i class="fab fa-edge text-4xl text-blue-700 mb-2"></i>
                            <p class="text-sm">Edge</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 开发工具 -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <h2 class="text-3xl font-bold mb-6 section-title">开发网页利器</h2>
            <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-8 rounded-xl">
                <h3 class="text-2xl font-bold mb-4"><i class="fas fa-tools mr-3"></i>HBuilder</h3>
                <p class="text-lg mb-4">专为前端开发设计的IDE，提供强大的代码提示和项目管理功能。</p>
                <a href="http://www.dcloud.io/" target="_blank" class="inline-block bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">
                    <i class="fas fa-download mr-2"></i>官方下载
                </a>
            </div>
            <p class="text-gray-600 mt-4 italic">提示：Eclipse也可以进行前端开发，但在代码提示方面不如专业工具。</p>
        </section>

        <!-- 网页组成 -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <h2 class="text-3xl font-bold mb-6 section-title">网页的组成部分</h2>
            <div class="mermaid">
                graph TD
                    A[网页] --> B[HTML]
                    A --> C[CSS]
                    A --> D[JavaScript]
                    B --> E[页面结构]
                    C --> F[样式表现]
                    D --> G[交互行为]
                    style A fill:#667eea,stroke:#764ba2,stroke-width:3px,color:#fff
                    style B fill:#f093fb,stroke:#f5576c,stroke-width:2px,color:#fff
                    style C fill:#4facfe,stroke:#00f2fe,stroke-width:2px,color:#fff
                    style D fill:#fa709a,stroke:#fee140,stroke-width:2px,color:#fff
            </div>
            <div class="grid md:grid-cols-3 gap-6 mt-8">
                <div class="text-center p-6 bg-gradient-to-br from-pink-50 to-red-50 rounded-xl">
                    <i class="fas fa-file-code text-4xl text-pink-600 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">HTML</h3>
                    <p class="text-gray-700">定义页面的内容和结构</p>
                </div>
                <div class="text-center p-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl">
                    <i class="fas fa-palette text-4xl text-blue-600 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">CSS</h3>
                    <p class="text-gray-700">控制页面的样式和布局</p>
                </div>
                <div class="text-center p-6 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl">
                    <i class="fas fa-bolt text-4xl text-yellow-600 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">JavaScript</h3>
                    <p class="text-gray-700">实现页面的动态交互</p>
                </div>
            </div>
        </section>

        <!-- HTML简介 -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <h2 class="text-3xl font-bold mb-6 section-title">HTML简介</h2>
            <div class="bg-gradient-to-r from-purple-100 to-pink-100 p-8 rounded-xl mb-6">
                <p class="text-lg mb-4"><strong>HTML</strong>（HyperText Markup Language）即<strong>超文本标记语言</strong>，是构建网页的基础语言。</p>
                <div class="grid md:grid-cols-2 gap-6 mt-6">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h4 class="font-semibold text-purple-800 mb-3"><i class="fas fa-images mr-2"></i>超文本</h4>
                        <p class="text-gray-700">不仅包含文本，还可以包含图片、音频、视频等多媒体内容。</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h4 class="font-semibold text-pink-800 mb-3"><i class="fas fa-tags mr-2"></i>标记语言</h4>
                        <p class="text-gray-700">通过标签（tags）来描述网页内容的结构和语义。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTML基本结构 -->
        <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 card-hover">
            <h2 class="text-3xl font-bold mb-6 section-title">HTML基本结构</h2>
            <div class="code-block">
                <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;网页标题&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- 网页内容 --&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>
            </div>
            <div class="mt-6 space-y-4">
                <div class="flex items-start">
                    <span class="tag-badge mr-4">&lt;!DOCTYPE html&gt;</span>
                    <p class="text-gray-700">声明文档类型为HTML5</p>
                </div>
                <div class="flex items-start">
                    <span class="tag-badge mr-4">&lt;html&gt;</span>
                    <p class="text-gray-700">根元素，包含整个网页内容</p>
                </div>
                <div class="flex items-start">
                    <span class="tag-badge mr-4">&lt;head&gt;</span>
                    <p class="text-gray-700">包含元数据，如标题、编码、样式等</p>
                </div>
                <div class="flex items-start">
                    <span class="tag-badge mr-4">&lt;body&gt;</span>
                    <p class="text-gray-700">包含可见的网页内容</p>
                </div>
            </div>
        </section>

        <!-- 常用标签 -->
        <section class="bg